%rebase layout title="Server List"

<style type="text/css" media="screen">
  @import "{{BASEURL}}/static/DataTables-1.9.2/media/css/demo_table.css";
  @import "{{BASEURL}}/static/DataTables-1.9.2/media/css/demo_page.css";
</style>
<script type="text/javascript" class="jsbin" src="{{BASEURL}}/static/DataTables-1.9.2/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
        var asInitVals = new Array();

$(document).ready(function() {
        var oTable = $('#example').dataTable({
                "oLanguage": {
                        "sSearch": "Search all columns:"
                }
        });
        $("tfoot input").keyup(function() {
                /* Filter on the column (the index) of this element */
                oTable.fnFilter(this.value, $("tfoot input").index(this));
        });
        /*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
        $("tfoot input").each(function(i) {
                asInitVals[i] = this.value;
        });
        $("tfoot input").focus(function() {
                if (this.className == "search_init") {
                        this.classname = "";
                        this.value = "";
                }
        });

        $("tfoot input").blur(function(i) {
                if (this.value == "") {
                        this.classname = "search_init";
                        this.value = asInitVals[$("tfoot input").index(this)];
                }
        });
});
</script>

<div id="container">
  <p><a href="{{appurl}}/_special/port" target="_blank">Port List</a></p>
  <table cellspacing="0" cellpadding="0" border="0" class="display" id="example">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Location</th>
        <th>Eth0</th>
        <th>Eth1</th>
        <th>Rcc</th>
        <th>Machine</th>
        <th>CPU</th>
        <th>MEM</th>
        <th>Disk</th>
        <th>OS</th>
        <th>Kernel</th>
        <th>Detail</th>
      </tr>
    </thead>
    <tbody>
      %for server in serverlist:
      <tr>
        <td class="left">{{server.sid}}</td>
        <td class="center">{{server.name}}</td>
        <td class="center">{{server.location}}</td>
        <td class="center">{{server.eth0_ip}}</td>
        <td class="center">{{server.eth1_ip}}</td>
        <td class="center">{{server.rcc_ip}}</td>
        <td class="center">{{server.machine_info}}</td>
        <td class="center">{{server.cpu_info}}</td>
        <td class="center">{{server.mem_info}}</td>
        <td class="center">{{server.hd_info}}</td>
        <td class="center">{{server.os_info}}</td>
        <td class="center">{{server.kernel_info}}</td>
        <td class="center"> <a href="{{appurl}}/{{server.sid}}" target="_blank">Details</a></td>
      </tr>
      %end
    </tbody>
    <tfoot>
      <tr>
        <th><input type="text" name="search_sid" value="Search ID" class="search_init"/></th>
        <th><input type="text" name="search_name" value="Search Name" class="search_init"/></th>
        <th><input type="text" name="search_location" value="Search Location" class="search_init"/></th>
        <th><input type="text" name="search_eth0_ip" value="Search Eth0" class="search_init"/></th>
        <th><input type="text" name="search_eth1_ip" value="Search Eth1" class="search_init"/></th>
        <th><input type="text" name="search_rcc_ip" value="Search Rcc" class="search_init"/></th>
        <th><input type="text" name="search_machine_info" value="Search Machine" class="search_init"/></th>
        <th><input type="text" name="search_cpu_info" value="Search CPU" class="search_init"/></th>
        <th><input type="text" name="search_mem_info" value="Search MEM" class="search_init"/></th>
        <th><input type="text" name="search_hd_info" value="Search Disk" class="search_init"/></th>
        <th><input type="text" name="search_os_info" value="Search OS" class="search_init"/></th>
        <th><input type="text" name="search_kernel_info" value="Search Kernel" class="search_init"/></th>
        <th><input type="text" name="search_detail" value="Search Detail" class="search_init"/></th>
      </tr>
    </tfoot>
  </table>
</div>
